import React from "react";
import { Table, Divider, Popover } from 'antd';
import { messages } from "share/common";
import PersonnelFeeReportService
  from "containers/data-center/report/travel-report/personnel-fee-report/personnel-fee-report.service";
const columnsCommon = {
  width: 120,
  render: text => <span>{text ? <Popover placement="topLeft" content={text}>{text}</Popover> : '-'}</span>
};

class UserDetailExpense extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loadingOver: false,//是否加载完毕
      loading: false,//是否正在加载
      searchParams: {},
      userDetailExpense: [],
      page: 0,
      size: 20,
      columns: [
        {
          title: messages('common.expense.type')/*费用类型*/,
          key: "expenseType",
          dataIndex: 'expenseType',
          ...columnsCommon
        },
        {
          title: messages('common.happened.date')/*发生日期*/,
          key: "expenseCreatedDate",
          dataIndex: 'expenseCreatedDate',
          ...columnsCommon
        },
        {
          title: messages('data-center.key98')/*分摊部门*/,
          key: "departmentName",
          dataIndex: 'departmentName',
          ...columnsCommon
        },
        {
          title: messages('data-center.key99')/*本币分摊金额*/,
          key: "baseAmount",
          dataIndex: 'baseAmount',
          ...columnsCommon
        },
        {
          title: messages('data-center.key100')/*原币币种*/,
          key: "currency",
          dataIndex: 'currency',
          ...columnsCommon
        },
        {
          title: messages('data-center.key101')/*原币分摊金额*/,
          key: "amount",
          dataIndex: 'amount',
          ...columnsCommon
        },
        {
          title: messages('data-center.key102')/*分摊比率*/,
          key: "proportion",
          dataIndex: 'proportion',
          ...columnsCommon
        },
        {
          title: messages('data-center.key103')/*报销单号*/,
          key: "businessCode",
          dataIndex: 'businessCode',
          ...columnsCommon
        },
        {
          title: messages('common.document.name')/*单据名称*/,
          key: "formName",
          dataIndex: 'formName',
          ...columnsCommon
        },
        {
          title: messages('data-center.key104')/*报销单状态*/,
          key: "reimbStatusDesc",
          dataIndex: 'reimbStatusDesc',
          ...columnsCommon
        },
        {
          title: messages('data-center.key140')/*报销单提交人*/,
          key: "submittedByName",
          dataIndex: 'submittedByName',
          ...columnsCommon
        },
        {
          title: messages('data-center.key141')/*报销单提交时间*/,
          key: "submitettdDate",
          dataIndex: 'submitettdDate',
          ...columnsCommon
        },
        {
          title: messages('data-center.key142')/*关联申请单号*/,
          key: "appBusinessCode",
          dataIndex: 'appBusinessCode',
          ...columnsCommon
        },
      ],
      willLoadingData: false,//用来显示数据即将被加载的状态

    }
  }

  componentDidMount() {
    const { onRef } = this.props;
    /*
    * 只组件挂载到父组件上面
    * 之后可以直接在父组件调子组件的方法
    * */
    onRef && onRef(this);
  }

  refreshComponentLoading = () => {
    this.setState({
      willLoadingData: true,
      userDetailExpense: []
    })
  }
  refreshComponent = (searchParams) => {
    this.setState({
      page: 0,
      size: 20,
      userDetailExpense: [],
      searchParams
    }, () => {
      this.getReportDetailUserDetailExpense(searchParams)
    })
  }
  getReportDetailUserDetailExpense = (params) => {
    this.state.loading = true;
    let { userDetailExpense } = this.state;
    PersonnelFeeReportService.getReportDetailUserDetailExpense(params, {
      page: this.state.page,
      size: this.state.size
    })
      .then(res => {
        if (res.data.length === 0 || res.data.length < this.state.size) {
          //加载完毕
          this.state.loadingOver = true;
          this.state.loading = false;
        } else {
          //页码加1 ，继续加载
          this.state.page += 1;
          this.state.loading = false;
          this.state.loadingOver = false
        }
        this.setState({
          willLoadingData: false,
          userDetailExpense: [ ...userDetailExpense, ...res.data ]
        })
      })
  }
  handleScroll = (e) => {
    if (e.nativeEvent.deltaY <= 0) {
      //向上滚动
    } else {
      if (!this.state.loading && !this.state.loadingOver) {
        //如果没有加载
        this.getReportDetailUserDetailExpense(this.state.searchParams)
      }
    }
  };

  render() {
    const { userDetailExpense, columns, willLoadingData } = this.state;
    return (
      <div className='user-detail-expense-table'>
        <div className="user-detail-title">
          {messages('data-center.key105')/*人员费用明细*/}
        </div>
        <div className="user-detail-table-wrap" onWheel={this.handleScroll}>
          <Table
            columns={columns}
            size="small"
            bordered
            loading={willLoadingData}
            scroll={{ x: 1300, y: 360 }}
            dataSource={userDetailExpense}
            pagination={false}
          />
        </div>
      </div>
    );
  }
}

UserDetailExpense.propTypes = {
  searchParams: React.PropTypes.any,
  onRef: React.PropTypes.any
};

UserDetailExpense.defaultProps = {
  height: 400
};

export default UserDetailExpense;
